/* @group Breadcrumb Button */

.breadcrumb-button {
  input[type="submit"] {
    color: ~"[[setting:themenavcolor]]";
    background-color: ~"[[setting:themecolor]]";
    background-image: none;

    &:hover {
      color: ~"[[setting:themecolor]]";
      background-color: ~"[[setting:themehovercolor]]";
    }
  }
  i {
    color: inherit;
  }
}

/* @end */

/* @group Breadcrumb */

.breadcrumb-nav {
  /* @group Breadcrumb Style Fancy */

  ul.breadcrumb.style1 {
    li {
      color: ~"[[setting:themenavcolor]]";
      background-color: ~"[[setting:themecolor]]";
      a {
        color: ~"[[setting:themenavcolor]]";
      }
      a:hover {
        color: ~"[[setting:themecolor]]";
      }
    }
    li:after {
      border-left-color: ~"[[setting:themecolor]]";
    }
    li:first-of-type {
      a:before {
        color: ~"[[setting:themenavcolor]]";
      }
      &:hover {
        a:before {
          color: ~"[[setting:themecolor]]";
        }
      }
    }
    li:hover {
      color: ~"[[setting:themecolor]]";
      background-color: ~"[[setting:themehovercolor]]";
      a {
        color: ~"[[setting:themecolor]]";
      }
    }
    li:hover:after {
      border-left-color: ~"[[setting:themehovercolor]]";
      a {
        color: ~"[[setting:themecolor]]";
      }
    }
  }
}

.dir-rtl .breadcrumb-nav {
  ul.breadcrumb.style1 {
    li:after {
      border-right-color: ~"[[setting:themecolor]]";
    }
    li:hover:after {
      border-right-color: ~"[[setting:themenavcolor]]";
    }
  }
}
/* @end */

/* @group Breadcrumb Style Simple */
ul.breadcrumb.style2 {
  li {
    a {
      color: ~"[[setting:themetextcolor]]";
    }
    a:hover {
      color: ~"[[setting:themehovercolor]]";
    }
  }
}

/* @end */

/* @end */